<template>
    <div class="pop-confirm">
        <mrc_ess_Popover ref="mrcEssPopover" :disabled="props.disabled" :location="props.location"
            :origin="props.origin" :openOnHover="props.openOnHover" :scrim="props.scrim" @open="handleOpen"
            @close="handleClose">
            <template v-slot:btn>
                <slot name="btn">
                    <!-- 触发按钮 -->
                    Popover
                </slot>
            </template>
            <template v-slot:default>
                <v-card class="pop-confirm-card min-w-[290px]">
                    <!-- 内容 -->
                    <div>
                        <slot name="default">
                            <!-- 标题 -->
                            <div class="pa-6 font-[500] text-[20px] leading-[28px]">
                                {{ $t(props.title) }}
                            </div>
                            <!-- 内容 -->
                            <div class="pl-6 pr-6 font-[400] text-[14px] leading-[18px]" v-if="props.content">
                                {{ $t(props.content) }}
                            </div>
                        </slot>
                    </div>
                    <div class="pa-6 flex justify-end">
                        <!-- 取消按鈕 -->
                        <v-btn :disabled="btnLoading"
                            class="mr-2 !rounded-[6px] !shadow-none !min-w-[90px] !normal-case" @click="handleCancel">{{
                                $t(props.cancelText) }}</v-btn>
                        <!-- 確認按鈕 -->
                        <v-btn class="!rounded-[6px] !shadow-none !min-w-[90px] !normal-case" :loading="btnLoading"
                            color="primary" @click="handleConfirm">{{
                                $t(props.confirmText)
                            }}</v-btn>
                    </div>
                </v-card>
            </template>
        </mrc_ess_Popover>
    </div>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue";
const props = defineProps({
    disabled: {
        type: Boolean,
        default: false
    },
    autoClose: {
        type: Boolean,
        default: true
    },
    cancelText: {
        type: String,
        default: "btn_cancel"
    },
    confirmText: {
        type: String,
        default: "btn_confirm"
    },
    openOnHover: {
        type: Boolean,
        default: false
    },
    location: {
        default: "bottom center"
    },
    origin: {
        default: undefined
    },
    title: {
        type: String,
        default: "text_tip"
    },
    content: {
        type: String,
        default: ""
    },
    scrim: {
        type: [Boolean, String],
        default: false
    }
})
const emit = defineEmits(['open', 'close', 'cancel', 'confirm']);
const btnLoading = ref(false);
const mrcEssPopover = ref();
/**
 * 打开事件
 */
function handleOpen(event: PointerEvent) {
    emit('open');
}
/**
 * 关闭事件
 */
function handleClose(event: PointerEvent) {
    btnLoading.value = false;
    emit('close');
}
/**
 * 点击取消
 */
function handleCancel(event: PointerEvent) {
    mrcEssPopover.value.close();
    emit('cancel', {
        showBtnLoading,
        hideBtnLoading,
        close,
        event: event
    });
}
/**
 * 点击确认
 */
function handleConfirm(event: PointerEvent) {
    if (props.autoClose) {
        mrcEssPopover.value.close();
    }
    emit('confirm', {
        showBtnLoading,
        hideBtnLoading,
        close,
        event: event
    });
}
/**
 * 确认按钮展示loading
 */
function showBtnLoading() {
    btnLoading.value = true;
}
/**
 * 确认按钮取消loading
 */
function hideBtnLoading() {
    btnLoading.value = false;
}
/**
 * 关闭对话框
 */
function close() {
    mrcEssPopover.value.close();
}
/**
 * 显示对话框
 */
function open() {
    mrcEssPopover.value.open();
}

defineExpose({
    showBtnLoading,
    hideBtnLoading,
    close,
    open
})
</script>

<style scoped></style>